<template>
  <div class="flow_ranking">
    <h2>客户画像</h2>
    <div class="traffic">
      <div
        id="myChart"
        :style="{width: '400px', height: '260px'}"
      ></div>
      <div class="portrait_list">
      <span v-for="(item,i) in characteristics" :key="i" :style="'color:'+colorList[i]+''">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "flowRanking",
  components: {},

  data() {
    return {
      dataList: [],
      maxValue: 0,
      characteristics:[],   //特征
      colorList:[]
    };
  },
  mounted() {
    this.getMaxFlowShop();
  },

  methods: {
    getMaxFlowShop() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var colors = [
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2",
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2",
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2"
      ];
      // var coo=["#ccc","#ccc","#f60","#f60","#ccc","#ccc","#ccc"];
      var aCategorys = ["", "特征A", "", "", "特征B", "", "", "特征C", "", "", "特征D", ""];
      var aSeries = [];
      var offs = [false, false, false, false, true, false, false, true, false];
      this.colorList=colors;
      aCategorys.forEach((v, i, a)=> {
        //console.log("i", i);
        var name = v;
        if (v != "") {
          this.characteristics.push(v);
          var data = [];
          var z = 2;
          if (i % 2 == 1) {
            z = 3;
          }
          for (var j = 0; j < aCategorys.length; j++) {
            data.push("-");
          }
          data[i - 1] = 0;
          data[i] = Math.round(Math.random() * 30 + 5);
          data[i + 1] = 0;

          console.log("data[i]", colors[i - 1]);

          var cc = {
            name: name,
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 1,

            lineStyle: {
              normal: {
                color: "#f60",
                width: 0
              }
            },
            itemStyle: {
              normal: {
                label: {
                  // formatter: "{c}" + "%",
                  formatter: function(params) {
                    console.log("params", params);
                    if (params.data != 0) {
                      return params.data + "%";
                    } else {
                      return "";
                    }
                  },
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "" + colors[i - 1] + ""
                  }
                }
              }
            },
            areaStyle: {
              normal: {
                opacity: 1,
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[i - 1] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[i - 1] // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: data,
            z: z
          };
          aSeries.push(cc);
        }
      });

      var option = null;
      option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var rValue;
            params.forEach(function(v, i, a) {
              if (v.data != 0 && v.data != "-") {
                rValue = v.seriesName + ": " + v.data;
              }
            });
            return rValue;
          }
        },
        xAxis: [
          {
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#7643be" //更改坐标轴颜色
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#f60", //更改坐标轴文字颜色
                fontSize: 14
              }
            },
            type: "category",
            boundaryGap: true,
            data: aCategorys,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#7643be" //更改坐标轴颜色
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 14
              }
            },
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: aSeries
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.flow_ranking {
  width: 400px;
  height: 280px;
  margin-top: 20px;
  float: left;
  margin-left: 40px;
  h2 {
    margin: 20px auto 0;
  }
  .traffic {
    width: 400px;
    height: 220px;
    position: relative;
    .portrait_list {
      position: absolute;
      left: 44px;
      bottom: -10px;
      width: 320px;
      height: 24px;
      display: flex;
      span {
        text-align: center;
        margin: 0 auto;
        width: 33.3%;
        overflow: hidden;
        font-size: 14px;
      }
    }
  }
}
</style>
